/****************************************************************************************** Import */
import _ from 'lodash';
import React, {Component} from 'react';
import Style from '../../func/system/basis/style';

/****************************************************************************************** Class */
export default class CompStyle extends Component {
    
    /**
     * 初始化
     */
    constructor(props) {
        super(props);
        
        // 取回styles（已组合自定义和原生styles
        this.styles = Object.assign(
            this.getFixedStyles(), 
            this.getGroupStyles(), 
            this.getAttributeStyles(), 
            this.getOriginStyles()
        );
        Object.assign(this.styles, this.getAlignStyles());

        // 并取回sysProps
        let deleteProps = [];
        if (_.isFunction(this.getDeleteProps)) {
            deleteProps = this.getDeleteProps();
        }
		this.sysProps = _.omit(
            this.props, 
            deleteProps,
			[
                // position
                'abs', 'rel',
                
                // absolute
                'top', 'bottom', 'left', 'right',
                
                // base
                'f', 'x', 'y', 'w', 'h', 'lh', 'bg', 'opacity',

                // margin
                'ma', 'mt', 'mb', 'ml', 'mr', 'mx', 'my',

                // padding
                'pa', 'pt', 'pb', 'pl', 'pr', 'px', 'py',

                // border
                'ba', 'bt', 'bb', 'bl', 'br', 'bx', 'by',
                
                // radius
                'ra', 'rt', 'rb', 'rl', 'rr',

                // font
                'color', 'size', 'bold', 'align',

                // display
                'df', 'dn',

                // overflow
                'oh', 'oa', 'os',

                // 去除原生的style和children
                'style', 'children'
            ]
        );
    }
    
    /**
     * 获取对齐styles
     */
    getAlignStyles() {
        if (_.isUndefined(this.styles.flexDirection)) {
            this.styles.flexDirection = 'row';
        }
        if (this.styles.flexDirection == 'row') {
            return Object.assign({},
                this.props.x && Style.jf(this.props.x), 
                this.props.y && Style.ai(this.props.y)
            );
        } 
        else if (this.styles.flexDirection == 'column') {
            return Object.assign({},
                this.props.x && Style.ai(this.props.x), 
                this.props.y && Style.jf(this.props.y)
            );
        }
    }

    /**
     * 获取属性级自定义styles
     */
    getAttributeStyles() {

        // 取Style和this.props的简称
        const s = Style;
        const p = this.props;

        // 计算styles，自带display:flex属性
        let styles = Object.assign(

            // display: flex
            s.df(),

            // position
            p.abs && s.abs(),
            p.rel && s.rel(),

            // absolute
            p.top && s.top(p.top),
            p.bottom && s.bottom(p.bottom),
            p.left && s.left(p.left),
            p.right && s.right(p.right),

            // base
            p.f && s.f(p.f),
            p.w && s.w(p.w),
            p.h && s.h(p.h),
            p.lh && s.lh(p.lh),
            p.bg && s.bg(p.bg),
            p.opacity && s.opacity(p.opacity),
        
            // margin
            p.ma && s.ma(p.ma),
            p.mt && s.mt(p.mt),
            p.mb && s.mb(p.mb),
            p.ml && s.ml(p.ml),
            p.mr && s.mr(p.mr),
            p.mx && s.mx(p.mx),
            p.my && s.my(p.my),

            // padding
            p.pa && s.pa(p.pa),
            p.pt && s.pt(p.pt),
            p.pb && s.pb(p.pb),
            p.pl && s.pl(p.pl),
            p.pr && s.pr(p.pr),
            p.px && s.px(p.px),
            p.py && s.py(p.py),

            // border
            p.ba && s.ba(p.ba),
            p.bt && s.bt(p.bt),
            p.bb && s.bb(p.bb),
            p.bl && s.bl(p.bl),
            p.br && s.br(p.br),
            p.bx && s.bx(p.bx),
            p.by && s.by(p.by),

            // radius
            p.ra && s.ra(p.ra),
            p.rt && s.rt(p.rt),
            p.rb && s.rb(p.rb),
            p.rl && s.rl(p.rl),
            p.rr && s.rr(p.rr),

            // font
            p.color && s.color(p.color),
            p.size && s.size(p.size),
            p.bold && s.bold(),
            p.align && s.bold(p.align),

            // display
            p.df && s.df(p.df),
            p.dn && s.dn(p.dn),
            p.db && s.db(p.db),
            p.di && s.di(p.di),

            // overflow
            p.oh && s.oh(p.oh),
            p.oa && s.oa(p.oa),
            p.os && s.os(p.os),
        );

        // 返回
        return styles;
    }

    /**
     * 获取Group自定义styles
     */
    getGroupStyles() {
		if (!_.isUndefined(this.props.group)) {
            return this.props.group;
        }
		return {};
    }

    /**
     * 获取原生级自定义styles
     */
    getOriginStyles() {
		if (!_.isUndefined(this.props.style)) {
            return this.props.style;
        }
		return {};
    }
}
